<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3 v-color="'orange'">自定义指令</h3>
			<h3 v-size="'30'">全局自定义指令</h3>
			<input type="text" v-focus></input>
		</div>
		<script type="text/javascript">
			Vue.directive('size', {
				bind(el, binding) {
					el.style.fontSize = binding.value + 'px';
				}
			})
			let vm = new Vue({
				el: '#app',
				//局部
				directives: {
					color: {
						/* 
						  el指令绑定的标签 
						  binding指令的值
						*/
						bind(el, binding) {
							console.log(el);
							console.log(binding);
							el.style.color = binding.value;
						}
					},
					focus: {
						//只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
						//el指令绑定的标签
						bind(el) {
							console.log("bind");

						},
						//指令绑定的元素被插入到页面时
						inserted: function(el) {
							console.log("inserted")
							el.focus();
						},
						//指令所在模板被重写解析时
						update: function(el) {
							console.log("update")
						}
					}
				}
			})
		</script>
	</body>
</html>
